import React, { Component } from 'react';

import Homepage_list from '../homepage/homepage_list/homepage_list'
import Top_bar from '../top_bar/top_bar';
import Main_nav from '../main_nav/main_nav'
import Menu from '../menu/menu'

import './homepage.css'
import Img_1 from '../images/2.jpg'
import Img_2 from '../images/1.png'
import Img_3 from '../images/9.jpg'

import { Modal, Carousel, Image } from 'antd';
import { allProduct } from '../../utils/api'

export default class Homepage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            data1: [],
            data2: [],
            data3: [],
            tempData: [],
        }
    }

    showModal = (e) => {
        this.state.data1.map((item, index) => {
            if (item.id == e) {
                this.setState({
                    visible: true,
                    tempData: item
                });
            }
        })
    };

    handleOk = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = (e) => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    goProductM = () => {
        this.props.history.push('/product_details')
    }

    goListM = () => {
        this.props.history.push('/product_list')
    }

    componentDidMount() {
        let data = {}

        allProduct(data).then((res) => {
            console.log(res, '所有商品')

            this.setState(() => {
                return {
                    data1: res.data.data=='' ? [] : res.data.data.list,
                    data2: res.data.data=='' ? [] : res.data.data.list.slice(0, 2),
                    data3: res.data.data=='' ? [] : res.data.data.list
                }
            })
        })
    }

    render() {
        const { data1, data2, data3 } = this.state
        return (
            <div>
                <Top_bar {...this.props} />
                <Main_nav {...this.props} />

                <div className="image-element_wrap">
                    <Carousel autoplay  effect="fade" >
                        <div className='swiperImgP' >
                        <img style={{  backgroundColor:'white',height: '100%', width: '100%', objectFit: 'cover', display: 'block' }} src={Img_1} alt="" />
                        </div>
                        <div className='swiperImgP' >
                        <img style={{ backgroundColor:'white', height: '100%', width: '100%', objectFit: 'cover', display: 'block' }} src={Img_2} alt="" />
                        </div>
                        <div className='swiperImgP' >
                        <img style={{ backgroundColor:'white', height: '100%', width: '100%', objectFit: 'cover', display: 'block' }} src={Img_3} alt="" />
                        </div>
                    </Carousel>
                </div>
                <div className="shopify-section collection-section">
                    <div className="featured_products product-grid">
                        <div className="sixteen columns center homepage_content">
                            <h2 className="title-one">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}
                                    onClick={this.goListM.bind(this)}
                                    >畅销书前十名</font>
                                </font>
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="container collect_product">
                    {
                        data1.map((item, index) => {
                            return (
                                <div className="min_products" key={index}>
                                    <div className="min-photos columns">
                                        <img src={item.cover} alt="" className="img"
                                        onClick={this.goProductM.bind(this)}
                                        />
                                        <div className="item">
                                            <div style={{ height: '130px' }}
                                            onClick={this.goProductM.bind(this)}
                                            >
                                                <div className="produce-list">
                                                    {item.name}
                                                </div>
                                                <div className="price">
                                                    <span className="red_price">${item.price}</span>
                                                    <span className="black_price">${item.price}</span>
                                                </div>
                                            </div>
                                            <div className="speed_look">
                                                <div className="speed_look_word" 
                                                onClick={this.showModal.bind(this, item.id)}
                                                >快速浏览</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                    <Modal
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                        footer={null}
                    >
                        <Homepage_list data={this.state.tempData} {...this.props} />
                    </Modal>
                </div>
                <div className="shopify-section collection-section">
                    <div className="featured_products product-grid">
                        <div className="sixteen columns center homepage_content">
                            <h2 className="title-one">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}
                                    onClick={this.goListM.bind(this)}
                                    >收藏清单</font>
                                </font>
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="list-collections-one">
                    {
                        data2.map((item, index) => {
                            return (
                                <div className="list-one" key={index}
                                onClick={this.goProductM.bind(this)}
                                >
                                    <div className="list-collections_one">
                                        <img src={item.cover} className="img-one" />
                                        <div className="item-one">
                                            <div className="produce-list-one">
                                                {item.name}
                                            </div>
                                            <div className="speed_look">
                                                <div className="speed_look_word">查看全部</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="shopify-section collection-section">
                    <div className="featured_products product-grid">
                        <div className="sixteen columns center homepage_content">
                            <h2 className="title-one">
                                <font style={{ verticalAlign: 'inherit' }}>
                                    <font style={{ verticalAlign: 'inherit' }}
                                    onClick={this.goListM.bind(this)}
                                    >瓶盖收集清单</font>
                                </font>
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="list-collections-two">
                    {
                        data3.map((item, index) => {
                            return (
                                <div className="list-two" key={index}
                                onClick={this.goProductM.bind(this)}
                                >
                                    <div className="list-collections_two">
                                        <img src={item.cover} alt="" className="img-two" />
                                        <div className="item-two">
                                            <div className="produce-list-two">
                                                {item.name}
                                            </div>
                                            <div className="speed_look">
                                                <div className="speed_look_word">查看全部</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

                <Menu {...this.props} />
            </div>
        );
    }
}